<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Progress 进度条 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>Bootstrap Progress</code>，可前往
                    <a class="e-link e-font-bold" href="https://getbootstrap.com/docs/4.3/components/progress/" target="_blank">查看详细API</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            基础
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <div class="e-section-content">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>
            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            尺寸
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">
                            你可以在<code>div.progress</code>上添加<code>.progress-sm</code>设置较小滚动条
                        </span>
                        <div class="e-section-content">
                            <div class="progress progress-sm">
                                <div class="progress-bar e-bg-primary" role="progressbar" style="width: 25%;"
                                     aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress progress-sm">
                                <div class="progress-bar e-bg-brand" role="progressbar" style="width: 50%;"
                                     aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress progress-sm">
                                <div class="progress-bar e-bg-warning" role="progressbar" style="width: 75%;"
                                     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress progress-sm">
                                <div class="progress-bar m-progress-lg" role="progressbar" style="width: 100%;"
                                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="e-separator e-separator--dashed"></div>
                        <span class="e-section-info">
                            你可以在<code>div.progress</code>上添加<code>.progress-lg</code>设置较大滚动条
                        </span>
                        <div class="e-section-content">
                            <div class="progress progress-lg">
                                <div class="progress-bar e-bg-primary" role="progressbar" style="width: 25%;"
                                     aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress progress-lg">
                                <div class="progress-bar e-bg-brand" role="progressbar" style="width: 50%;"
                                     aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress progress-lg">
                                <div class="progress-bar e-bg-warning" role="progressbar" style="width: 75%;"
                                     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress progress-lg">
                                <div class="progress-bar m-progress-lg" role="progressbar" style="width: 100%;"
                                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="e-separator e-separator--dashed"></div>
                        <span class="e-section-info">
                            如需自定义高度，你可以在<code>div.progress</code>上添加<code>style="height: 10px"</code>
                        </span>
                        <div class="e-section-content">
                            <div class="progress" style="height: 1px;">
                                <div class="progress-bar e-bg-info" role="progressbar" style="width: 65%;"
                                     aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar e-bg-success" role="progressbar" style="width: 65%;"
                                     aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress" style="height: 10px;">
                                <div class="progress-bar e-bg-brand" role="progressbar" style="width: 65%;"
                                     aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress" style="height: 15px;">
                                <div class="progress-bar e-bg-brand" role="progressbar" style="width: 65%;"
                                     aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-lg-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            状态
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">
                            你可以在<code>div.progress</code>上添加状态工具classes<code>.bg-*</code>试滚动条显示不同的颜色
                        </span>
                        <div class="e-section-content">
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 25%"
                                     aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar bg-info" role="progressbar" style="width: 50%"
                                     aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 75%"
                                     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar progress-lg" role="progressbar" style="width: 100%"
                                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section">
                        <span class="e-section-info">
                            你可以在<code>div.progress</code>内添加多个<code>.progress-bar</code>将进度条分段
                        </span>
                        <div class="e-section-content">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-success" role="progressbar" style="width: 30%"
                                     aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-info" role="progressbar" style="width: 20%"
                                     aria-valuenow="20"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 35%" aria-valuenow="15"
                                     aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 10%"
                                     aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar progress-lg" role="progressbar" style="width: 40%"
                                     aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            条纹
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Section-->
                    <div class="e-section ">
                        <span class="e-section-info">
                            你可以在<code>div.progress</code>上添加<code>.progress-bar-striped</code>开启条纹效果
                        </span>
                        <div class="e-section-content">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"
                                     aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-success" role="progressbar"
                                     style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-info" role="progressbar"
                                     style="width: 50%"
                                     aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
                                     style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-lg" role="progressbar"
                                     style="width: 100%" aria-valuenow="100" aria-valuemin="0"
                                     aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <span class="e-section-info">
                            你可以在<code>div.progress</code>上添加<code>.progress-bar-striped.progress-bar-animated</code>开启动态条纹效果
                        </span>
                        <div class="e-section-content">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated " role="progressbar"
                                     aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated  bg-warning"
                                     role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"
                                     style="width: 35%"></div>
                            </div>
                            <div class="e-space-10"></div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated  bg-success"
                                     role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"
                                     style="width: 65%"></div>
                            </div>
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>
            <!--end::Card-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>